<template>
	<div id="divbox">
    <div style="position: absolute;top: 270px;">
      <router-link to="/index">
        <img src="../assets/img/toNewsStyle.png" width="300px" height="150px">
      </router-link>
    </div>
		<!-- 【此图像是圆圈头像logo】 -->
		<img src="https://ts1.cn.mm.bing.net/th/id/R-C.3aeeb6d5725738095a7ad521d46ce428?rik=prLV4puYz%2btYuw&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2018021008%2fjrmgrhcgro0.jpg&ehk=Im%2fy1GA0xuqdwYNnKtzfue2b09jzjym4jjUXy7e0Seo%3d&risl=&pid=ImgRaw&r=0"
			alt="Your Image" class="img01">
		<div class="login-form">
      <br/>
			<div id="logo" style="font-family: 'Microsoft YaHei';letter-spacing: 0.5px; font-weight: bold; font-size: 40px; text-align: center;color: #00A9F8; ">
				    管理员登录
			</div>
			<el-form ref="form" :rules="rules" :model="form" label-width="80px">
				<el-form-item label="用户名" prop="account">
					<el-input v-model="form.account" class="input"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="form.password" class="input" show-password></el-input>
				</el-form-item>
				<el-form-item>

					<el-button type="primary" @click="onSubmit('form')" style="width: 300px;">登录</el-button>
					<br />
					<span style="color: #006A5A;" @click="reg()">没有账号？点击注册</span>
				</el-form-item>
			</el-form>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					account: '',
					password: '',
				},
				rules: {
					 account: [
					            { required: true, message: '请输入账户', trigger: 'blur' },
					            { min: 3, max: 10, message: '长度在 3 到 10 个字符~', trigger: 'blur' }
					          ],
					 password: [
					            { required: true, message: '请输入密码', trigger: 'blur' },
					            { min: 3, max: 10, message: '长度在 1 到 10 个字符~', trigger: 'blur' }
					          ],
				}
			}
		},
		methods: {
			reg() {
				// alert("注册");
				this.$router.push("/reg")
			},
			onSubmit(form) {//【登录】
				
					//数据向后端发送进行验证
					//$refs是一个引用
					this.$refs[form].validate((valid) => {
					  if (valid) {
					    //如果发送成功，跳转到其他组件
						this.$http.post("admin/loginCtl/login",this.form).then((resp)=>{
							//【跳转语句】
							if(resp.data.code==200){
								this.$message({showClose: true,message: '恭喜你，账户正确✔',type: 'success'});
								sessionStorage.setItem("account",resp.data.data.account);
								sessionStorage.setItem("adminToken",resp.data.data.adminToken);
								this.$router.push('/main');
							}else if(resp.data.code==201){
								this.$message({showClose: true,message: '输入的账户或密码错误~', type: 'error'});
							}
							
						})
						
						/* 
						this.$message({showClose: true,message: '系统忙，维修人员正在抢修！',type: 'warning'}); */
					  }
					});
				}
			}
	}
</script>

<style scoped>
	#divbox {
		width: 100%;
		height: 100vh;
		/*将🎀页面背景  图片路径替换为你自己的图片路径*/
		background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.b923d0630782b4e46dcbb2121b22bdbf?rik=l7wVr9wcUyyTzw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f68%2f768.jpg&ehk=anhoZ%2fxmeecIhRHc2n9reoQbtJ2xXrvIEx0sJbLLMiI%3d&risl=&pid=ImgRaw&r=0");
		/*保持图片比例并完全覆盖元素*/
		background-size: cover;
		background-position: center center;
		/*将图片居中对齐*/
	}

	.login-form {
		width: 442px;
		height: 400px;
		background-color: rgba(248, 242, 235, 0.5);
		;
		position: relative;
		left: 455px;
		top: 170px;


	}

	#logo {
		width: 100%;
		height: 60px;
		/* background-color: aquamarine; */
		margin-bottom: 30px;
	}

	.input {
		max-width: 300px;
	}

	.img01 {
		border-radius: 50%;
		width: 100px;
		position: absolute;
		left: 638px;
		top: 50px;
	}
</style>
